<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="100"
    height="100"
    viewBox="0 0 100 100"
    fill="none"
  >
    <g opacity="1" transform="translate(0 0)">
      <rect
        fill="#FFFFFF"
        opacity="0"
        transform="translate(0 0)"
        x="0"
        y="0"
        width="100"
        height="100"
        rx="0"
        ry="0"
      />
      <mask id="bg-mask-0" fill="white">
        <use transform="translate(0 0)" xlink:href="#path_0"></use>
      </mask>
      <g mask="url(#bg-mask-0)">
        <g opacity="1" transform="translate(15.516170501708984 10.553823471069336)">
          <path
            id="直线 1"
            :fill="lineColor"
            opacity="1"
            d="M-0.175 59.0512L68.6781 19.2988L69.0281 19.905L0.175 59.6574L-0.175 59.0512Z"
          ></path>
          <path
            id="直线 1"
            :fill="lineColor"
            opacity="1"
            d="M0.837952 19.8295L68.9392 59.1478L68.5892 59.754L0.487952 20.4357L0.837952 19.8295Z"
          ></path>
          <path
            id="直线 1"
            :fill="lineColor"
            opacity="1"
            d="M34.1338 78.8923L34.1338 0L34.8338 0L34.8338 78.8923L34.1338 78.8923Z"
          ></path>
        </g>
        <path
          id="多边形 1"
          :fill="bigHexagonColor"
          opacity="1"
          d="M85.141 32.3094L85.141 67.6906C85.141 69.2983 84.2833 70.7839 82.891 71.5877L52.25 89.2783C50.8577 90.0822 49.1423 90.0822 47.75 89.2783L17.109 71.5877C15.7167 70.7839 14.859 69.2983 14.859 67.6906L14.859 32.3094C14.859 30.7017 15.7167 29.2161 17.109 28.4123L47.75 10.7217C49.1423 9.91783 50.8577 9.91783 52.25 10.7217L82.891 28.4123C84.2833 29.2161 85.141 30.7017 85.141 32.3094ZM84.141 32.3094C84.141 31.059 83.4739 29.9035 82.391 29.2783L51.75 11.5877C50.6671 10.9625 49.3329 10.9625 48.25 11.5877L17.609 29.2783C16.5261 29.9035 15.859 31.059 15.859 32.3094L15.859 67.6906C15.859 68.941 16.5261 70.0965 17.609 70.7217L48.25 88.4123C49.3329 89.0375 50.6671 89.0375 51.75 88.4123L82.391 70.7217C83.4739 70.0965 84.141 68.941 84.141 67.6906L84.141 32.3094Z"
        ></path>
        <path
          id="多边形 2"
          :fill="smallHexagonColor"
          opacity="1"
          d="M67.6705 42.3094L67.6705 57.6906C67.6705 59.2447 66.8414 60.6808 65.4955 61.4578L52.175 69.1484C50.8291 69.9255 49.1709 69.9255 47.825 69.1484L34.5045 61.4578C33.1586 60.6808 32.3295 59.2447 32.3295 57.6906L32.3295 42.3094C32.3295 40.7553 33.1586 39.3192 34.5045 38.5422L47.825 30.8516C49.1709 30.0745 50.8291 30.0745 52.175 30.8516L65.4955 38.5422C66.8414 39.3192 67.6705 40.7553 67.6705 42.3094ZM66.9705 42.3094C66.9705 41.0054 66.2748 39.8004 65.1455 39.1484L51.825 31.4578C50.6957 30.8058 49.3043 30.8058 48.175 31.4578L34.8545 39.1484C33.7252 39.8004 33.0295 41.0054 33.0295 42.3094L33.0295 57.6906C33.0295 58.9946 33.7252 60.1996 34.8545 60.8516L48.175 68.5422C49.3043 69.1942 50.6957 69.1942 51.825 68.5422L65.1455 60.8516C66.2748 60.1996 66.9705 58.9946 66.9705 57.6906L66.9705 42.3094Z"
        ></path>
        <!-- 修改文字位置，translate(40 92)其中40为x坐标，92为y坐标；x加数值是向左，y加数值是向下-->
        <g opacity="1" transform="translate(40 5)">
          <text>
            <tspan
              x="0.5"
              y="3.2439999999999998"
              :font-size="fontSize"
              line-height="0"
              :fill="fontColor"
              opacity="1"
              font-family="SourceHanSansCN-Regular"
              font-weight="Regular"
              letter-spacing="0"
            >
              琥珀色
            </tspan>
          </text>
        </g>
        <!-- 修改文字位置，translate(40 92)其中40为x坐标，92为y坐标；x加数值是向左，y加数值是向下-->
        <g opacity="1" transform="translate(83 28)">
          <text>
            <tspan
              x="2.5"
              y="3.2439999999999998"
              :font-size="fontSize"
              line-height="0"
              :fill="fontColor"
              opacity="1"
              font-family="SourceHanSansCN-Regular"
              font-weight="Regular"
              letter-spacing="0"
            >
              真菌
            </tspan>
          </text>
        </g>
        <!-- 修改文字位置，translate(40 92)其中40为x坐标，92为y坐标；x加数值是向左，y加数值是向下-->
        <g opacity="1" transform="translate(83 68)">
          <text>
            <tspan
              x="2.5"
              y="3.2439999999999998"
              :font-size="fontSize"
              line-height="0"
              :fill="fontColor"
              opacity="1"
              font-family="SourceHanSansCN-Regular"
              font-weight="Regular"
              letter-spacing="0"
            >
              钙化
            </tspan>
          </text>
        </g>
        <!-- 修改文字位置，translate(40 92)其中40为x坐标，92为y坐标；x加数值是向左，y加数值是向下-->
        <g opacity="1" transform="translate(0 68)">
          <text>
            <tspan
              x="2.5"
              y="3.2439999999999998"
              :font-size="fontSize"
              line-height="0"
              :fill="fontColor"
              opacity="1"
              font-family="SourceHanSansCN-Regular"
              font-weight="Regular"
              letter-spacing="0"
            >
              穿孔
            </tspan>
          </text>
        </g>
        <!-- 修改文字位置，translate(40 92)其中40为x坐标，92为y坐标；x加数值是向左，y加数值是向下-->
        <g opacity="1" transform="translate(0 28)">
          <text>
            <tspan
              x="2.5"
              y="3.2439999999999998"
              :font-size="fontSize"
              line-height="0"
              :fill="fontColor"
              opacity="1"
              font-family="SourceHanSansCN-Regular"
              font-weight="Regular"
              letter-spacing="0"
            >
              出血
            </tspan>
          </text>
        </g>
        <!-- 修改文字位置，translate(40 92)其中40为x坐标，92为y坐标；x加数值是向左，y加数值是向下-->
        <g opacity="1" transform="translate(40 93)">
          <text>
            <tspan
              x="0.5"
              y="3.2439999999999998"
              :font-size="fontSize"
              line-height="0"
              :fill="fontColor"
              opacity="1"
              font-family="SourceHanSansCN-Regular"
              font-weight="Regular"
              letter-spacing="0"
            >
              分泌物
            </tspan>
          </text>
        </g>
      </g>
    </g>
    <defs>
      <rect id="path_0" x="0" y="0" width="100" height="100" rx="0" ry="0" />
    </defs>

    <polygon
      :points="points"
      stroke-width="1.5"
      :stroke="polygonColor"
      opacity="0.5"
      :fill="polygonFillColor"
      :transform="scale"
      transform-origin="center"
    ></polygon>
  </svg>
</template>

<script>
import { ref, watch } from 'vue'
import { gsap } from 'gsap'

export default {
  name: 'heaxgonStar',
  initPoints: '50,30 67.68,40 67.68,60 50,70 32.32,60 32.32,40',
  props: {
    score: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    /**
     * 控制svg中各个元素的一些属性
     */
    const bigHexagonColor = '#0af3e8' //大六边形颜色
    const smallHexagonColor = '#408f99' //小六边形颜色
    const lineColor = '#408f99' //线颜色
    const fontSize = 6 //字体大小
    const fontColor = '#00f6ff' //字体颜色
    const polygonColor = 'red' //多边形线条颜色
    const polygonFillColor = '#916d3d' //多边形填充颜色
    /**
     * polygon的transform所需要的scale格式
     * @type {Ref<any>}
     */
    let scale = ref()
    /**
     * 用于动画的绘制，从0到1
     * @type {Ref<UnwrapRef<number>>}
     */
    let scaleNum = ref(0)
    /**
     * 用于绑定到绘制的N边形上
     * @type {Ref<any>}
     */
    let points = ref()
    /**
     * 六边形里面三角形的高，用于测量各个得分点的x偏移量
     * @type {Ref<any>}
     */
    const triangle = ref(40 * Math.cos(Math.PI / 6))
    /**
     * 六边形其中竖直两条边的长，用于测量各个得分点的y偏移量
     */
    const side = ref(40 / 2)
    /**
     * 六边形的边长
     */
    const sideLength = 40
    //x的偏移量为 疾病得分*COS（30度）
    //y的偏移量为 疾病得分*SIN（30度）
    /**
     * 特征顺序
     * @type {{CXF: {next: string, previous: string}, GHBF: {next: string, previous: string}, FMWF: {next: string, previous: string}, MJF: {next: string, previous: string}, HPSF: {next: string, previous: string}, CKF: {next: string, previous: string}}}
     */
    const featureOrder = {
      HPSF: {
        previous: 'CXF',
        next: 'MJF'
      },
      MJF: {
        previous: 'HPSF',
        next: 'GHBF'
      },
      GHBF: {
        previous: 'MJF',
        next: 'FMWF'
      },
      FMWF: {
        previous: 'GHBF',
        next: 'CKF'
      },
      CKF: {
        previous: 'FMWF',
        next: 'CXF'
      },
      CXF: {
        previous: 'CKF',
        next: 'HPSF'
      }
    }

    /**
     * 监控score的变化，重新绘制
     */
    watch(
      () => props.score,
      () => {
        //如果props.score存在，进行绘制
        props.score && initPolygons()
      }
    )

    /**
     * 动画绘制
     */
    function initPolygons() {
      // console.log(props.score);
      console.log('琥珀色分', props.score.HPSF)
      console.log('真菌分', props.score.MJF)
      console.log('钙化分', props.score.GHBF)
      console.log('分泌物分', props.score.FMWF)
      console.log('穿孔分', props.score.CKF)
      console.log('出血分', props.score.CXF)
      //把得分进行百分比转换，公式为：(边长*得分)/100

      /**
       * 琥珀色100分的坐标为（50,10）
       * 琥珀色分的坐标为：x=50，y=10+（40-得分）
       * @type {string}
       */
      let HPSF = '50,' + (10 + (40 - (props.score.HPSF * sideLength) / 100))
      /**
       * 真菌色100分的坐标为（85,30）
       * 真菌分的坐标为：x=85-（triangle-得分*cos30°），y=30+（side-得分*sin30°）
       * @type {string}
       */
      let MJF =
        85 -
        (triangle.value - ((props.score.MJF * sideLength) / 100) * Math.cos(Math.PI / 6)) +
        ',' +
        (30 + (side.value - ((props.score.MJF * sideLength) / 100) * Math.sin(Math.PI / 6)))
      /**
       * 钙化100分的坐标为（85,70）
       * 钙化分的坐标为：x=85-（triangle-得分*cos30°），y=70-（side-得分*sin30°）
       */
      let GHBF =
        85 -
        (triangle.value - ((props.score.GHBF * sideLength) / 100) * Math.cos(Math.PI / 6)) +
        ',' +
        (70 - (side.value - ((props.score.GHBF * sideLength) / 100) * Math.sin(Math.PI / 6)))
      /**
       * 分泌物100分的坐标为（50,90）
       * 分泌物分的坐标为：x=50，y=90-（40-得分）
       */
      let FMWF = '50,' + (90 - (40 - (props.score.FMWF * sideLength) / 100))
      /**
       * 穿孔100分的坐标为（15,70）
       * 穿孔分的坐标为：x=15+（triangle-得分*cos30°），y=70-（side-得分*sin30°）
       */
      let CKF =
        15 +
        (triangle.value - ((props.score.CKF * sideLength) / 100) * Math.cos(Math.PI / 6)) +
        ',' +
        (70 - (side.value - ((props.score.CKF * sideLength) / 100) * Math.sin(Math.PI / 6)))
      /**
       * 出血100分的坐标为（15,30）
       * 出血分的坐标为：x=15+（triangle-得分*cos30°），y=30+（side-得分*sin30°）
       */
      let CXF =
        15 +
        (triangle.value - ((props.score.CXF * sideLength) / 100) * Math.cos(Math.PI / 6)) +
        ',' +
        (30 + (side.value - ((props.score.CXF * sideLength) / 100) * Math.sin(Math.PI / 6)))
      /**
       * 各个得分的坐标点
       * @type {{CXF: string, GHBF: string, FMWF: string, MJF: string, HPSF: string, CKF: string}}
       */
      let featurePosition = {
        HPSF: HPSF,
        MJF: MJF,
        GHBF: GHBF,
        FMWF: FMWF,
        CKF: CKF,
        CXF: CXF
      }

      //拼接各个得分，变成polygon所需要的points格式
      scale.value = 'scale(0)'

      let scoreObject = getScoreNum()
      if (scoreObject.length === 0) {
        return
      }
      //不管有1个或2个有效得分，都需要经过原点
      if (scoreObject.length === 1 || scoreObject.length === 2) {
        for (let key in featurePosition) {
          if (scoreObject[key] === 0) {
            featurePosition[key] = ''
          }
        }
        points.value =
          '50,50 ' +
          featurePosition.HPSF +
          ' ' +
          featurePosition.MJF +
          ' ' +
          featurePosition.GHBF +
          ' ' +
          featurePosition.FMWF +
          ' ' +
          featurePosition.CKF +
          ' ' +
          featurePosition.CXF
      }
      //三个有效得分，如果三个得分相邻，那么需要经过原点；否则不需要
      if (scoreObject.length === 3) {
        let tempArray = []
        for (let key in featurePosition) {
          if (scoreObject[key] > 0) {
            tempArray.push(key)
          } else {
            featurePosition[key] = ''
          }
        }
        //只要有一个不相邻，那么就不经过原点;否则，需要经过原点
        if (
          featureOrder[tempArray[0]].previous !== tempArray[1] &&
          featureOrder[tempArray[0]].next !== tempArray[1]
        ) {
          points.value =
            featurePosition.HPSF +
            ' ' +
            featurePosition.MJF +
            ' ' +
            featurePosition.GHBF +
            ' ' +
            featurePosition.FMWF +
            ' ' +
            featurePosition.CKF +
            ' ' +
            featurePosition.CXF
        } else {
          points.value =
            '50,50 ' +
            featurePosition.HPSF +
            ' ' +
            featurePosition.MJF +
            ' ' +
            featurePosition.GHBF +
            ' ' +
            featurePosition.FMWF +
            ' ' +
            featurePosition.CKF +
            ' ' +
            featurePosition.CXF
        }
      }
      //4个有效得分，不需要经过原点
      if (scoreObject.length > 3) {
        points.value =
          featurePosition.HPSF +
          ' ' +
          featurePosition.MJF +
          ' ' +
          featurePosition.GHBF +
          ' ' +
          featurePosition.FMWF +
          ' ' +
          featurePosition.CKF +
          ' ' +
          featurePosition.CXF
      }
      gsap.to(scaleNum, {
        value: 1,
        duration: 1,
        onUpdate: () => {
          scale.value = 'scale(' + scaleNum.value + ')'
        },
        onComplete: () => {
          scaleNum.value = 0
        }
      })
    }

    /**
     * 判断有效得分有几个
     */
    function getScoreNum() {
      let scoreNum = 0
      let scoreObject = {}
      for (let key in props.score) {
        for (let fKey in featureOrder) {
          if (key === fKey && props.score[key] > 0) {
            scoreNum++
          }
          if (key === fKey) {
            scoreObject[key] = props.score[key]
            break
          }
        }
      }
      scoreObject['length'] = scoreNum
      return scoreObject
    }

    return {
      points,
      scale,
      lineColor,
      bigHexagonColor,
      smallHexagonColor,
      fontColor,
      fontSize,
      polygonColor,
      polygonFillColor
    }
  }
}
</script>

<style scoped></style>
